<template>
  <div class="goods-info">
    <div class="my-panle">
      <Swiper :lunbolist="lunbolist"></Swiper>
    </div>
    <div class="my-panle">
      <van-panel :title="info.title">
        <div class="content">
          <p class="price">
            <span class="new">
              现价:￥{{info.sell_price}}
            </span>
            <span class="old">
              原价:￥{{info.market_price}}
            </span>
          </p>
          <p class="number">
            购买数量:
            <van-stepper v-model="value" />
          </p>
          <p>
            <van-button
              type="primary"
              size="small"
              class="buy"
            >立即购买</van-button>
            <van-button
              type="danger"
              size="small"
              @click="addCart"
            >加入购物车</van-button>
          </p>
        </div>
      </van-panel>
    </div>

    <div class="my-panle">
      <van-panel title="商品信息">
        <div class="content">
          <p>商品货号:{{info.goods_no}}</p>
          <p>库存情况:{{info.stock_quantity}}件</p>
          <p>上架时间:{{info.add_time}}</p>
        </div>
      </van-panel>
    </div>
  </div>
</template>
<script>
import Swiper from '@/components/Swiper'
export default {
  name: 'GoodsInfo',
  props: ['id'],
  data: () => ({
    lunbolist: [],
    value: 1,
    info: {}
  }),
  created() {
    this.getThumImages()
    this.getInfoById()
  },
  methods: {
    async getThumImages() {
      const res = await this.$http.getThumImages(this.id)
      this.lunbolist = res.message
    },
    async getInfoById() {
      const res = await this.$http.getInfoById(this.id)
      this.info = res.message
    },
    addCart() {
      const goodsinfo = {
        // 数量
        count: this.value,
        // id
        id: this.id,
        // 是否选中
        selected: true,
        // 价格
        sell_price: this.info.sell_price,
        // 图片
        src: this.lunbolist[0].src,
        // 时间
        timer: null,
        // 标题
        title: this.info.title
      }
      // console.log(goodsinfo)
      this.$store.commit({
        type: 'addCart',
        goodsinfo
      })
    }
  },
  components: {
    Swiper
  }
}
</script>
<style lang="less">
.goods-info {
  padding: 0 10px;
  .my-panle {
    border: 1px solid #eee;
    margin-top: 10px;
    .my-swipe {
      height: 150px;
      text-align: center;
      padding: 10px;
      img {
        // width: 50%;
        height: 100%;
      }
    }
    .content {
      padding-left: 12px;
      box-sizing: border-box;
      font-size: 12px;
      .price {
        .new {
          color: red;
          margin-right: 20px;
        }
        .old {
          text-decoration: line-through;
        }
      }
      .number {
        display: flex;
        align-items: center;
      }
      .buy {
        margin-right: 20px;
      }
    }
  }
}
</style>